<template>
	<div class="homelist">
		<header>
			<h2>{{proptitle}}</h2>
			<router-link to="/mobile/booklist">更多 ></router-link>
		</header>
		<ul>
			<li v-for="(item,index) in FilterList" :key="item.id">
				<router-link :to="`/mobile/bookdetail/${item.id}`" v-if=" (item.hot!=0 && index < 6) || (item.price!=0 && index < 12) ">
					<img :src="`${$ip}/api/public/showimg/${item.picture}`"/>
					<h3>{{item.name}}</h3>
					<span v-show="item.price !=0">￥:{{item.price.toFixed(2)}}</span>
					<span v-show="item.hot !=0">热度:{{item.hot}}</span>
				</router-link>
			</li>
		</ul>
	</div>
</template>

<script>
export default {
	name:'MobileHomeList',
	props: ['proplist','proptitle'],
	data(){
		return{
			list:[]
		}
	},
	watch:{
		// 如果数据请求获取，基本上都需要监听props的数据，确保获取到数据后再进行循环等操作
		propslist(){
			
		}
	},
	computed:{
		FilterList(){
			// 现在是假数据，不存在时差，直接赋值【后期发起请求后必须删除】
			this.list =this.proplist;
			// forEach()：只做循环操作
			// map( ()=>{ return })：是一个有返回值回调函数
			let filters = this.list.map((item)=>{
				return {
					id : item.id,
					name : item.memo ? item.memo : item.name,
					picture : item.picture ? item.picture : item.pic,
					price : !item.price ? 0 : item.price,
					hot : item.hot ? item.hot : 0
				}
			});
			filters.sort((a1,a2)=>{
				return this.proptitle == '热门推荐' ?a2.hot-a1.hot : this.proptile == '新书上市'? a2.id-a1.id : a1.id-a2.id;
			})
			return filters;
		}
	},
}
</script>

<style scoped>
.homelist{
	width: 100%;
	margin: 0;
	padding: 0;
	padding-bottom: 10px;
}
.homelist header{
	line-height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.homelist header h2{
	color: #a68b5b;
	font-size: 1rem;
	margin-left: 0.5rem;
}
.homelist header a{
	display: inline-block;
	width: 3rem;
	font-size: 0.8rem;
	color: #a68b5b;
}
.homelist ul{
	width: 96%;
	margin: 0 auto 2.5rem;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.homelist ul li{
	width: 46%;
	overflow: hidden;
	margin-left: 0.8rem;
	margin-bottom: 0.8rem;
	background-color: white;
	text-align: center;
	position: relative;
}
.homelist ul li img{
	width: 80%;
	height: 10rem;
	margin-top: 1rem;
}
.homelist ul li h3{
	width: 100%;
	height: 2.5rem;
	line-height: 2.5rem;
	font-size: 0.8rem;
	background-color: rgba(245, 213, 160, 0.5);
	color: #a68b5b;
	text-align: center;
	font-weight: normal;
	/* 中文强制不换行 */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	
	/* 支持webkit内核的浏览器才能生效
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2; */
}
.homelist ul li span{
	font-size: 0.7rem;
	background-color: rgba(0,0,0,0.5);
	position: absolute;
	top: 0;
	right: 0;
	color: gold;
	padding: 0.4rem 0.3rem;
	/* 单独设置某个角 为圆角 */
	border-radius: 0 0 0 0.6rem;
}
</style>
